<template>
	<view class="tab-container">
		<swiper 
			class="tab-swiper" 
			:current="currentIndex" 
			@change="handleSwiperChange"
			:duration="300"
			:disable-programmatic-animation="false">
			
			<!-- 打听事页面 -->
			<swiper-item class="swiper-item">
				<view class="page-wrapper">
					<slot name="index"></slot>
				</view>
			</swiper-item>
			
			<!-- 评分页面 -->
			<swiper-item class="swiper-item">
				<view class="page-wrapper">
					<slot name="score"></slot>
				</view>
			</swiper-item>
			
			<!-- 换班页面 -->
			<swiper-item class="swiper-item">
				<view class="page-wrapper">
					<slot name="schedule"></slot>
				</view>
			</swiper-item>
			
			<!-- 我的页面 -->
			<swiper-item class="swiper-item">
				<view class="page-wrapper">
					<slot name="profile"></slot>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'TabContainer',
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentIndex: 0
		}
	},
	watch: {
		current: {
			handler(newVal) {
				this.currentIndex = newVal;
			},
			immediate: true
		}
	},
	methods: {
		handleSwiperChange(e) {
			const index = e.detail.current;
			this.currentIndex = index;
			
			// 更新全局数据
			if (getApp().globalData) {
				getApp().globalData.currentTabIndex = index;
			}
			
			// 切换到对应的tabbar页面
			const tabPages = [
				'pages/index/index',
				'pages/score/index',
				'pages/schedule/index',
				'pages/profile/index'
			];
			
			// 触发tabbar切换
			uni.switchTab({
				url: '/' + tabPages[index],
				success: () => {
					this.$emit('change', index);
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-container {
	width: 100%;
	height: 100vh;
	position: relative;
}

.tab-swiper {
	width: 100%;
	height: 100%;
}

.swiper-item {
	height: 100%;
	overflow: hidden;
}

.page-wrapper {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	position: relative;
}
</style> 